<template>
  <div class="body-wrapper">
    <nav-bar @click-left="onClickLeft" @click-right="onClickRight">
      <template slot="right">
        <van-icon name="search"></van-icon>
      </template>
    </nav-bar>
    <h2>主题色</h2>
    <div class="flex">
      <div
        v-for="item in list"
        :key="item.type"
        :class="`bar-${item.type}`"
        class="flex-1 rounded my-1 mr-1 p-1 text-white"
      >
        <i class="el-icon-check"></i>
        {{ item.text }}
      </div>
    </div>
    <h2>请求示例</h2>
    <div class="my-1">
      <van-button plain type="primary" @click="get">普通get</van-button>
      <van-button plain type="primary" @click="getWithToken">携带token的get</van-button>
      <van-button plain type="primary" @click="getWithoutLoading">不需要loading的get</van-button>
    </div>
    <div class="my-1">
      <van-button plain type="primary" @click="post">普通post</van-button>
      <van-button plain type="primary" @click="postWithCancel">
        禁止重复提交的post（疯狂点击试试）
      </van-button>
      <van-button plain type="primary" @click="postWithoutCancel">
        允许重复提交的post（疯狂点击试试）
      </van-button>
    </div>
    <h2>路由跳转</h2>
    <van-button plain type="primary" @click="goToDetail">去详情</van-button>
    <h2>日期函数</h2>
    <div class="my-1">使用 dayjs</div>
    <h2>枚举</h2>
    <div class="my-1">苹果：{{ Fruit['Apple'] }}</div>
    <div class="my-1">香蕉：{{ Fruit['Banana'] }}</div>
    <div class="my-1">梨：{{ Fruit['Pear'] }}</div>
    <h2>常量</h2>
    <div class="my-1">写在 /src/constants/index.js 里</div>
  </div>
</template>
<script>
import { getUserList, addUser } from '../../api/httpService'
import { Fruit } from '../../enums'

export default {
  name: 'Home',
  data() {
    return {
      checked: true,
      list: [
        { type: 'primary', icon: 'menu', text: '主要' },
        { type: 'success', icon: 'check', text: '成功' },
        { type: 'warning', icon: 'warning', text: '警告' },
        { type: 'danger', icon: 'delete', text: '危险' },
        { type: 'info', icon: 'info', text: '信息' },
      ],
      Fruit,
    }
  },
  methods: {
    // 导航栏右侧点击事件
    onClickRight(e) {
      console.log('右侧点击', e)
    },
    // 导航栏左侧点击事件
    onClickLeft(e) {
      console.log('左侧点击', e)
    },
    // 普通get请求
    get() {
      getUserList({ name: 'cxx' }).then(res => {
        const { list } = res
        console.log(list)
        this.$toast.success('成功')
      })
    },
    // 携带token的get请求
    getWithToken() {
      getUserList({ name: 'cxx' }, { headers: { token: 'abcdefg' } }).then(res => {})
    },
    // 不需要loading的get请求
    getWithoutLoading() {
      getUserList({ name: 'cxx' }, {}, { loading: false }).then(res => {
        this.$toast.success('成功')
      })
    },
    // 普通post请求
    post() {
      addUser({ name: 'cxx' }).then(res => {})
    },
    // post请求禁止重复提交
    postWithCancel() {
      addUser({ name: 'cxx' }, {}, { loading: false }).then(res => {
        this.$toast.success('成功')
      })
    },
    // post请求允许重复提交
    postWithoutCancel() {
      addUser({ name: 'cxx' }, {}, { loading: false, repeatCancel: false }).then(res => {
        this.$toast.success('成功')
      })
    },
    goToDetail() {
      this.$router.push('/home/detail')
    },
  },
}
</script>
<style lang="scss" scoped>
.header {
  padding: 10px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  background: $primary;
}

.bar-primary {
  background: $primary;
}

.bar-warning {
  background: $warning;
}

.bar-success {
  background: $success;
}

.bar-danger {
  background: $danger;
}

.bar-info {
  background: $info;
}
</style>
